<template>
  <div class="lum-dialog-mask">
    <div class="lum-dialog-box">
      <el-container class="container">
        <el-header class="header no-select" height="60px">
          <p>群管理 ({{ detail.group_name }})</p>
          <p class="tools">
            <i class="el-icon-close" @click="$emit('close')"/>
          </p>
        </el-header>
        <el-main class="main no-padding">
          <el-container class="full-height">
            <el-aside width="100px" class="aside-border no-select">
              <div
                  v-for="(menu, index) in menus"
                  :key="menu.name"
                  class="menu-list"
                  :class="{ selectd: tabIndex == index }"
                  v-text="menu.name"
                  @click="triggerTab(index)"
              />
            </el-aside>

            <!-- 群介绍模块 -->
            <el-main v-if="tabIndex == 0">
              <el-row>
                <el-col :span="14">
                  <el-form ref="groupForm" :model="form" :rules="rules">
                    <el-form-item label="群名:" prop="group_name">
                      <el-input
                          v-model="form.group_name"
                          size="medium"
                          placeholder="请输入群名称"
                          maxlength="30"
                          show-word-limit
                      />
                    </el-form-item>
                    <el-form-item label="群描述:">
                      <el-input
                          v-model="form.profile"
                          type="textarea"
                          rows="3"
                          placeholder="请输入群描述"
                      />
                    </el-form-item>
                    <el-form-item>
                      <el-button
                          type="primary"
                          icon="el-icon-edit"
                          size="small"
                          :loading="loading"
                          @click="editGroup"
                      >修改信息
                      </el-button>
                    </el-form-item>
                  </el-form>
                </el-col>
                <el-col :span="10" class="avatar-col">
                  <div class="avatar-box">
                    <img v-show="form.avatar" :src="form.avatar"/>
                    <div class="upload-icon">
                      <i class="el-icon-upload"/>
                    </div>
                    <div class="upload-mask" @click="isAvatarCropper = true">
                      <i class="el-icon-plus"/>
                    </div>
                  </div>
                  <p style="margin-top: 20px">设置头像</p>
                </el-col>
              </el-row>
            </el-main>

            <!-- 群成员模块 -->
            <el-main v-else-if="tabIndex == 1" class="no-padding">
              <el-container class="full-height">
                <el-header height="50px" class="notice-header">
                  <el-input
                      v-model="searchMembers"
                      style="width: 200px"
                      size="small"
                      clearable
                      prefix-icon="el-icon-search"
                      :placeholder="`搜索群成员 ( 共${members.length}人 )`"
                  />
                  <p>
                    <el-button
                        plain
                        size="small"
                        icon="el-icon-plus"
                        @click="inviteFriendBox = true"
                    >邀请好友
                    </el-button>
                    <el-button
                        v-if="batchDelMember"
                        type="danger"
                        size="small"
                        icon="el-icon-delete"
                        @click="deleteMembers"
                    >确认删除
                    </el-button>
                    <el-button
                        v-else
                        plain
                        size="small"
                        icon="el-icon-finished"
                        @click="batchDelMember = true"
                    >批量操作
                    </el-button>
                  </p>
                </el-header>
                <el-main class="no-padding">
                  <el-scrollbar
                      class="full-height"
                      tag="section"
                      :native="false"
                  >
                    <div class="members">
                      <div
                          v-for="member in filterMembers"
                          class="member no-select"
                          :class="{selectd: member.is_delete}"
                          :key="member.userId"
                      >
                        <div class="item-header">
                          <div class="avatar" @click="catUserDetail(member)">
                            <el-avatar :size="30" :src="member.userProfile">
                              <img src="~@/assets/image/detault-avatar.jpg"/>
                            </el-avatar>
                            <span class="nickname" v-text="member.username"/>
                            <span class="larkc-tag" v-show="member.leader == 2">群主</span>
                          </div>
                          <div
                              v-show="batchDelMember && member.leader != 2"
                              class="tools"
                          >
                            <i
                                class="el-icon-success"
                                :class="{ 'is-delete': member.is_delete }"
                                @click.stop="triggerDelBtn(member)"
                            />
                          </div>
                        </div>
                        <div class="profile">
                          签名 | {{ member.motto ? member.motto : '未设置' }}
                        </div>
                      </div>
                    </div>
                  </el-scrollbar>
                </el-main>
              </el-container>
            </el-main>

            <!-- 群公告模块 -->
            <el-main v-else-if="tabIndex == 2" class="no-padding">
              <el-container class="full-height">
                <el-header
                    class="notice-header"
                    height="50px"
                    style="padding-left: 14px"
                >
                  <span>群公告 ({{ notice.items.length }})</span>
                  <el-button
                      plain
                      size="small"
                      icon="el-icon-plus"
                      @click="showNoticeBox(0, '', '')"
                  >
                    添加公告
                  </el-button>
                </el-header>

                <el-main class="no-padding">
                  <el-scrollbar
                      class="full-height"
                      tag="section"
                      :native="false"
                  >
                    <div v-if="notice.items.length == 0" class="empty-notice">
                      <SvgNotData style="width: 80px; margin-bottom: 10px"/>
                      <span>暂无群公告</span>
                    </div>

                    <div v-else class="notices">
                      <div
                          v-for="(item, index) in notice.items"
                          :key="item.id"
                          class="notice"
                      >
                        <div class="title">
                          <span
                              class="left-title"
                              v-text="item.title"
                              @click="
                              showNoticeBox(item.id, item.title, item.content)
                            "
                          ></span>
                          <span
                              class="right-tools no-select"
                              @click="catNoticeDetail(index)"
                          >{{ item.isShow ? '收起' : '展开' }}</span>
                          <span
                              class="right-tools"
                              @click="delNotice(item)"
                          >删除</span>
                        </div>
                        <p class="datetime">
                          <el-avatar :size="15" :src="item.avatar">
                            <img src="~@/assets/image/detault-avatar.jpg"/>
                          </el-avatar>
                          <span
                              class="text nickname"
                              v-text="item.nickname"
                              @click="openUserCard(item)"
                          ></span>
                          <span class="text">
                            发表于 {{ item.createdTime | moment }}
                          </span>
                        </p>
                        <p
                            class="content"
                            :class="{ retract: !item.isShow }"
                            v-text="item.content"
                        ></p>
                      </div>
                    </div>
                  </el-scrollbar>
                </el-main>
              </el-container>
            </el-main>

            <el-main v-else-if="tabIndex == 3" class="no-padding"></el-main>
          </el-container>
        </el-main>
      </el-container>
    </div>

    <!-- 编辑公告信息 -->
    <div class="lum-dialog-mask animated fadeIn" v-show="notice.isShowform">
      <div class="notice-box">
        <h4>编辑群公告</h4>
        <el-form ref="noticeForm" :model="notice.form" :rules="notice.rules">
          <el-form-item label="标题" prop="title">
            <el-input
                v-model="notice.form.title"
                size="medium"
                placeholder="请输入标题..."
                maxlength="30"
                show-word-limit
            />
          </el-form-item>
          <el-form-item label="详情" prop="content">
            <el-input
                v-model="notice.form.content"
                type="textarea"
                rows="5"
                placeholder="请输入公告详情..."
                maxlength="500"
            />
          </el-form-item>
          <el-form-item style="text-align: right">
            <el-button plain size="small" @click="notice.isShowform = false">
              取消
            </el-button>
            <el-button
                type="primary"
                size="small"
                :loading="notice.loading"
                @click="onSubmitNotice"
            >提交
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <transition name="el-fade-in-linear">
      <AvatarCropper v-if="isAvatarCropper" @close="closeAvatarCropper"/>
    </transition>

    <!-- 查看好友用户信息 -->
    <UserBusinessCard ref="userBusinessCard"/>

    <transition name="el-fade-in-linear">
      <GroupLaunch
          v-if="inviteFriendBox"
          :group-id="groupId"
          @close="inviteFriendBox = false"
          @invite-success="inviteSuccess"
      />
    </transition>
  </div>
</template>
<script>
import AvatarCropper from '@/components/layout/AvatarCropper'
import UserBusinessCard from '@/components/user/UserBusinessCard'
import GroupLaunch from '@/components/group/GroupLaunch'
import {SvgNotData} from '@/core/icons'
import {
  ServeGetGroupMembers,
  ServeGetGroupNotices,
  ServeEditGroupNotice,
  ServeRemoveMembersGroup,
  ServeGroupDetail,
  ServeEditGroup,
} from '@/api/group'
import {getByGroupId} from "../../api/group";
import {listNotice, insertNotice, delNotice, updateNotice} from "../../api/notice";
import {getUser} from "../../utils/auth";

export default {
  name: 'GroupManage',
  props: {
    groupId: {
      type: [String, Number],
      default: null,
    },
  },
  components: {
    AvatarCropper,
    UserBusinessCard,
    GroupLaunch,
    SvgNotData,
  },
  data() {
    return {
      // 当前选中菜单
      tabIndex: 0,
      menus: [
        {name: '群信息'},
        {name: '群成员'},
        {name: '群公告'},
      ],

      loading: false,
      form: {
        group_name: '',
        profile: '',
        avatar: '',
      },
      rules: {
        group_name: [
          {
            required: true,
            message: '用户昵称不能为空!',
            trigger: 'blur',
          },
        ],
      },

      detail: {
        group_name: '',
        profile: '',
        avatar: '',
      },

      // 群成员列表
      searchMembers: '',
      batchDelMember: false,
      members: [],

      // 群公告相关数据
      notice: {
        isShowform: false,
        loading: false,
        form: {
          id: 0,
          title: '',
          content: '',
        },
        rules: {
          title: [
            {
              required: true,
              message: '标题不能为空!',
              trigger: 'blur',
            },
          ],
          content: [
            {
              required: true,
              message: '详情不能为空',
              trigger: 'blur',
            },
          ],
        },
        items: [],
      },

      inviteFriendBox: false,
      isAvatarCropper: false,
    }
  },
  computed: {
    filterMembers() {
      return this.searchMembers == ''
          ? this.members
          : this.members.filter(item => {
            return (
                item.username.match(this.searchMembers) != null
            )
          })
    },
  },
  created() {
    this.loadGroupDetail()
    // this.loadMembers()
    this.loadNotices()

  },
  methods: {
    // 加载群信息
    loadGroupDetail() {
      getByGroupId(this.groupId).then(res => {
        if (res.code == 200) {
          let result = res.data
          this.form = this.detail = {
            group_name: result.groupName,
            profile: result.profile,
            avatar: result.avatar,
          }
          //加载群组成员列表
          this.members = res.data.userFornts.map(item => {
            item.leader = item.userId === result.creator_id ? 2 : 1
            item.is_delete = false
            return item
          })
        }
      })
    },

    // 加载群组公告列表
    loadNotices() {
      listNotice(this.groupId).then(res => {
        if (res.code == 200) {
          this.notice.items = res.data.map(item => {
            item.isShow = false
            return item
          })
        }
      })
    },

    // 修改群信息
    editGroup() {
      this.$refs.groupForm.validate(valid => {
        if (!valid) return false
        this.loading = true
        ServeEditGroup({
          group_id: this.groupId,
          group_name: this.form.group_name,
          profile: this.form.profile,
          avatar: this.form.avatar,
        })
            .then(res => {
              if (res.code == 200) {
                this.detail.group_name = this.form.group_name
                this.detail.profile = this.form.profile
                this.detail.avatar = this.form.avatar

                this.$message({
                  message: '信息修改成功...',
                  type: 'success',
                })
              } else {
                this.$message('信息修改失败...')
              }
            })
            .finally(() => {
              this.loading = false
            })
      })
    },

    // 左侧菜单栏切换事件
    triggerTab(i) {
      this.tabIndex = i
    },

    // 关闭头像裁剪弹出层
    closeAvatarCropper(type, avatar = '') {
      this.isAvatarCropper = false
      if (type == 1 && avatar != '') {
        this.form.avatar = avatar
      }
    },

    // 显示编辑公告窗口
    showNoticeBox(id = 0, title = '', content = '') {
      this.notice.isShowform = true
      this.notice.form.id = id
      this.notice.form.title = title
      this.notice.form.content = content
    },

    // 编辑公告提交事件
    onSubmitNotice() {
      let loginUser = JSON.parse(getUser())
      this.$refs.noticeForm.validate(valid => {
        if (!valid) return false

        this.notice.loading = true
        // 编辑公告
        if (this.notice.form.id !== 0) {
          updateNotice(
                  this.notice.form.id,
                  this.notice.form.title,
                  this.notice.form.content
          ).then(res => {
            if (res.data === 1){
              this.notice.isShowform = false
              this.loadNotices()
              this.$notify({
                title: '消息提示',
                message: '群公告修改成功...',
                type: 'success',
              })
            }else {
              this.$notify({
                title: '消息提示',
                message: '群公告添加失败...',
                type: 'warning',
              })
            }
          }).catch(() => {
            this.$notify({
              title: '消息提示',
              message: '网络异常，请稍后再试...',
              position: 'bottom-right',
              type: 'warning',
            })
          }).finally(() => {
            this.notice.loading = false
          })
        }
        // 添加公告
        else {
          insertNotice(
              this.groupId,
              loginUser.userId,
              this.notice.form.title,
              this.notice.form.content
          ).then(res => {
            console.log(res)
            if (res.data === 1) {
              this.notice.isShowform = false
              this.loadNotices()
              this.$notify({
                title: '消息提示',
                message: '群公告添加成功...',
                type: 'success',
              })
            } else {
              this.$notify({
                title: '消息提示',
                message: '群公告添加失败...',
                type: 'warning',
              })
            }
          }).catch(() => {
            this.$notify({
              title: '消息提示',
              message: '网络异常，请稍后再试...',
              position: 'bottom-right',
              type: 'warning',
            })
          }).finally(() => {
            this.notice.loading = false
          })
        }


      })
    },

    // 展开/收起群公告详情
    catNoticeDetail(index) {
      this.notice.items[index].isShow = !this.notice.items[index].isShow
    },

    // 删除公告
    delNotice(item) {
      this.$confirm(`您确定要将【${item.title.substr(0, 10)}】公告删除?`, '温馨提示', {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
        dangerouslyUseHTMLString: true,
        customClass: 'border-radius0',
      })
          .then(() => {
            delNotice(item.id).then(res => {
              if (res.data === 1) {
                this.loadNotices()
                this.$notify({
                  title: '消息提示',
                  message: '删除成功....',
                  type: 'success'
                })
              }
            })
          })
          .catch(() => {
            console.log('取消')
          })
    },

    // 打开用户卡片
    openUserCard(item){
      this.$refs.userBusinessCard.open(item.userId)
    },

    // 查看群成员信息事件
    catUserDetail(item) {
      this.$refs.userBusinessCard.open(item.userId)
    },

    // 选中删除成员事件
    triggerDelBtn(member) {
      let i = this.members.findIndex(item => {
        return item.userId === member.userId
      })

      this.members[i].is_delete = !this.members[i].is_delete
    },

    // 批量删除群成员
    deleteMembers() {
      let ids = [],
          names = []

      this.members.forEach(item => {
        if (item.is_delete) {
          ids.push(item.userId)
          names.push(item.username)
        }
      })

      if (ids.length == 0) {
        this.batchDelMember = false
        return
      }

      this.$confirm(`您确定要将【 ${names.join('、')}】移出群聊?`, '温馨提示', {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
        dangerouslyUseHTMLString: true,
        customClass: 'border-radius0',
      })
          .then(() => {
            this.$notify({
              title: '删除功能开发中....',
            })
            this.members.map(item => {
              return (item.is_delete = false)
            })
            this.batchDelMember = false
            // ServeRemoveMembersGroup({
            //     group_id: this.groupId,
            //     members_ids: ids.join(','),
            // }).then(res => {
            //     if (res.code == 200) {
            //         this.loadMembers()
            //         this.$notify({
            //             title: '删除成功',
            //             message: `已成功将群成员移除群组...`,
            //             type: 'success',
            //         })
            //     }
            // })
          })
          .catch(() => {
            this.members.map(item => {
              return (item.is_delete = false)
            })
            this.batchDelMember = false
          })
    },

    // 好友邀请成功回调方法
    inviteSuccess() {
      this.inviteFriendBox = false
      this.loadMembers()
    },
  },
}
</script>
<style lang="less" scoped>
.lum-dialog-box {
  width: 80%;
  height: 500px;
  max-width: 800px;
}

.aside-border {
  display: flex;
  flex-direction: column;
  padding: 8px;
  border-right: 1px solid #f5f5f5;

  .menu-list {
    height: 25px;
    line-height: 25px;
    margin: 8px 2px;
    font-weight: 400;
    font-size: 13px;
    background-color: white;
    cursor: pointer;
    border-left: 3px solid white;
    padding-left: 10px;

    &.selectd {
      color: #2196f3;
      border-color: #2196f3;
    }
  }
}

.avatar-col {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.avatar-box {
  width: 100px;
  height: 100px;
  box-shadow: 0px 0px 7px 1px #e8e4e4;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  transition: ease 0.5s;

  .upload-icon {
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(184, 184, 197, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;

    i {
      font-size: 30px;
      color: #1bb0f3;
    }
  }

  img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    z-index: 0;
  }

  .upload-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 3;
    display: none;
    justify-content: center;
    align-items: center;

    i {
      font-size: 30px;
      color: white;
    }
  }

  &:hover .upload-mask {
    display: flex;
  }
}

/* 群成员相关 start */
.members {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 5px 20px;
  justify-content: space-between;

  .member {
    width: 48%;
    height: 70px;
    border-radius: 3px;
    cursor: pointer;
    border: 1px dashed #e2dcdc;
    margin: 5px 0;
    padding: 3px;
    transition: ease 0.5s;

    .larkc-tag {
      color: #3370ff;
      background-color: #e1eaff;
    }

    .item-header {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;

      .avatar {
        flex: 1 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 3px 5px;

        .nickname {
          font-size: 13px;
          margin: 0 5px 0 15px;
        }
      }

      .tools {
        flex-basis: 50px;
        overflow: hidden;
        text-align: right;
        padding-right: 5px;

        i {
          color: #cccccc;
        }

        .is-delete {
          color: #03a9f4;
        }
      }
    }

    .profile {
      color: #8f8a8a;
      font-size: 12px;
      padding: 3px 5px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin: 3px 0;
    }

    &:hover,
    &.selectd {
      border-color: #2196f3;
    }
  }
}

/* 群成员相关 end */

/* 公告相关 start */
.notice-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.empty-notice {
  width: 100%;
  height: 100%;
  min-height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  span {
    color: #cccccc;
    font-size: 13px;
  }
}

.notices {
  .notice {
    cursor: pointer;
    min-height: 76px;
    overflow: hidden;
    border-bottom: 1px dashed #e2dcdc;
    margin-bottom: 15px;
    margin-right: 15px;
    padding-bottom: 5px;
    margin: 2px 20px 15px 15px;

    h6 {
      font-size: 15px;
      font-weight: 300;
    }

    .title {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      height: 30px;

      .left-title {
        flex: 1 1;
        height: 100%;
        line-height: 30px;
        font-size: 14px;
      }

      .right-tools {
        flex-basis: 70px;
        flex-shrink: 0;
        height: 100%;
        line-height: 30px;
        text-align: right;
        font-weight: 300;
        font-size: 12px;
        color: #2196f3;
      }
    }

    .datetime {
      font-size: 10px;
      color: #a59696;
      font-weight: 300;
      display: flex;
      flex-direction: row;
      align-items: center;
      margin: 10px 0;

      .text {
        margin: 0 5px;
      }

      .nickname {
        color: #2196f3;
        font-weight: 400;
      }
    }

    .retract {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .content {
      font-size: 12px;
      line-height: 28px;
      font-weight: 500;
      color: #7d7a7a;
    }
  }
}

.notice-box {
  position: relative;
  padding: 28px;
  background: #fff;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  overflow: hidden;
  box-sizing: border-box;
  height: 415px;
  width: 420px;

  h4 {
    margin-bottom: 20px;
    font-weight: 400;
  }
}

/* 公告相关 end */

/deep/ .el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>
